<template>
  <div class="detail_gallery">
    <el-row style="height: 100%" :class="{'threeColumn': data.length === 3}">
      <template v-for="item in data">
        <el-col :xs="24" :sm="24" :md="24 / data.length" :key="'detail_gallery-item_' + item.image" class="detail_gallery_style" :class="[imageStyle]">
          <template v-if="isMobile">
            <el-col class="detail_gallery-text"  v-transition="{transform: 'translateY(100px)'}">
              <p class="title">{{item.title}}</p>
              <p class="description">{{item.description}}</p>
            </el-col>
          </template>
          <template v-else>
            <el-col class="detail_gallery-text">
              <div class="detail_gallery-text-inner">
                <p class="title">{{item.title}}</p>
                <p class="description" v-if="item.description">{{item.description}}</p>
              </div>
            </el-col>
          </template>
          <el-col class="detail_gallery-image">
            <template v-if="isMobile">
              <el-image
                v-transition="{transform: 'translateY(100px)'}"
                :src="item.image | formatImage('mobile')"
                fit="cover">
              </el-image>
            </template>
            <template v-else>
              <el-image
                :src="item.image | formatImage(imageStyle)"
                fit="cover">
              </el-image>
            </template>
          </el-col>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script>
import utils, { isMobile } from '@/utils/index.js'
export default {
  props: {
    imageStyle: {
      type: String,
      default: 'imageTextStyle1-1'
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
  },
  filters: {
    formatImage(image, imageStyle) {
      if(!image) return
      let resizes = {
        'imageTextStyle1-1': '?x-oss-process=image/resize,m_fill,h_600,w_800,limit_0/interlace,1',
        'imageTextStyle1-2': '?x-oss-process=image/resize,m_fill,h_600,w_800,limit_0/interlace,1',
        'imageTextStyle1-3': '?x-oss-process=image/resize,m_fill,h_600,w_1200,limit_0/interlace,1',
        'imageTextStyle1-4': '?x-oss-process=image/resize,m_fill,h_600,w_1200,limit_0/interlace,1',
        'imageTextStyle1-5': '?x-oss-process=image/resize,m_fill,h_800,w_600,limit_0/interlace,1',
        'imageTextStyle1-6': '?x-oss-process=image/resize,m_fill,h_800,w_600,limit_0/interlace,1',
        'imageTextStyle2-1': '?x-oss-process=image/resize,m_fill,h_600,w_800,limit_0/interlace,1',
        'imageTextStyle2-2': '?x-oss-process=image/resize,m_fill,h_600,w_800,limit_0/interlace,1',
        'imageTextStyle2-3': '?x-oss-process=image/resize,m_fill,h_600,w_800,limit_0/interlace,1',
        'imageTextStyle3-1': '?x-oss-process=image/resize,m_fill,h_600,w_800,limit_0/interlace,1',
        'imageTextStyle3-2': '?x-oss-process=image/resize,m_fill,h_600,w_800,limit_0/interlace,1',
        'imageTextStyle4-1': '?x-oss-process=image/resize,m_fill,h_1080,w_1920,limit_0/interlace,1',
        'mobile': '?x-oss-process=image/resize,m_lfit,w_750,limit_0/interlace,1'
      }
      if(image.indexOf('http') !== -1) {
        image = image + (resizes[imageStyle] || '')
      } else {
        image = utils.setCdnUrl() + image + (resizes[imageStyle] || '')
      }
      return image
    }
  },
  computed: {
    isMobile() {
      return isMobile()
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  .detail_gallery {
    pointer-events: none;
    background: #FFFFFF;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-top: 72px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    .threeColumn {
      padding: 0 7.5%;
    }
  }
  .detail_gallery_style {
    display: flex;
    height: 100%;
  }
  .detail_gallery-text {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      font-size: 56px; 
      line-height: 64px;
      margin-bottom: 12px; 
      font-weight: bold; 
      color: #191919;
    }

    .description {
      font-size: 24px; 
      line-height: 32px; 
      color: #191919;
    }
  }
  .detail_gallery-image {
    display: flex;
    justify-content: center;
    align-items: center;
    // flex-grow: 1;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .imageTextStyle1-5,
  .imageTextStyle1-1 {
    .detail_gallery-text {
      order: 1;
      .detail_gallery-text-inner {
        padding-left: 56px;
        padding-right: 7.5%;
      }
    }
    .detail_gallery-image {
      order: 0;
      max-width: 50%;

      .el-image {
        width: 100%;
      }
    }
  }
  .imageTextStyle1-6,
  .imageTextStyle1-2 {
    .detail_gallery-text {
      order: 0;
      .detail_gallery-text-inner {
        padding-left: 7.5%;
        padding-right: 56px;
      }
    }
    .detail_gallery-image {
      order: 1;
      max-width: 50%;
      .el-image {
        width: 100%;
      }
    }
  }
  .imageTextStyle1-6,
  .imageTextStyle1-5 {
    .detail_gallery-image {
      width: 600px;
      flex-shrink: 0;
      .el-image {
        height: 100%;
      }
    }
  }
  .imageTextStyle1-3 {
    flex-direction: column;
    justify-content: center;
    .detail_gallery-image {
      // margin-top: 72px;
      max-width: 100%;
      order: 0;
      /deep/ .el-image {
        max-height: 100%;
      }
    }
    .detail_gallery-text {
      order: 1;
      padding: 0 7.5%;
      margin: 24px auto 18px;
      text-align: center;
      flex-shrink: 0;
    }
  }
  .imageTextStyle1-4 {
    flex-direction: column;
    justify-content: center;
    .detail_gallery-image {
      max-width: 100%;
      order: 1;
    }
    .detail_gallery-text {
      padding: 0 7.5%;
      order: 0;
      text-align: center;
      margin: 0 auto 26px;
      flex-shrink: 0;
    }
  }
  .imageTextStyle2-1,
  .imageTextStyle2-2,
  .imageTextStyle2-3 {
    flex-direction: column;
    justify-content: center;
    .detail_gallery-text {
      height: 168px;
      flex-shrink: 0;
      overflow: hidden;
      justify-content: space-between;
      .title {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 16px;
      }
      .description {
        font-size: 20px;
        line-height: 28px;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 4;  /*要显示的行数*/
        -webkit-box-orient: vertical;
        margin-bottom: 26px;
      }
    }
    .detail_gallery-image {
      margin: 24px 0;
    }
    &:first-child {
      padding-left: 7.5%;
      padding-right: 20px;
    }
    &:last-child {
      padding-left: 20px;
      padding-right: 7.5%;
    }
  }
  .imageTextStyle2-1 {
    .detail_gallery-text {
      order: 1;
    }
    .detail_gallery-image {
      order: 0;
    }
  }
  .imageTextStyle2-3 {
    &:first-child {
      .detail_gallery-text {
        order: 1;
      }
      .detail_gallery-image {
        order: 0;
      }
    }
  }
  .imageTextStyle3-1,
  .imageTextStyle3-2 {
    flex-direction: column;
    justify-content: center;
    // padding: 0 20px;
    .detail_gallery-text {
      height: 235px;
      overflow: hidden;
      flex-shrink: 0;
      justify-content: flex-start;
      .title {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 16px;
      }
      .description {
        font-size: 20px;
        line-height: 28px;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 5;  /*要显示的行数*/
        -webkit-box-orient: vertical;
        margin-bottom: 26px;
      }
    }
    .detail_gallery-image {
      margin: 24px 0;
    }
    &:first-child {
      padding-right: 27px;
    }
    &:nth-child(2) {
      padding: 0 14px;
    }
    &:last-child {
      padding-left: 27px;
    }
  }
  .imageTextStyle3-1 {
    .detail_gallery-text {
      order: 1;
    }
    .detail_gallery-image {
      order: 0;
    }
  }
  .imageTextStyle4-1 {
    .detail_gallery-text {
      order: 1;
      display: none;
    }
    .detail_gallery-image {
      width: 100%;
      .el-image {
        height: 100%;
      }
    }
  }
  .imageTextStyle4-2 {
    .detail_gallery-text {
      text-align: center;
      padding: 0 7.5%;
    }
    .detail_gallery-image {
      display: none;
    }
  }
  @media screen and (max-width: 1600px) {
    .detail_gallery-text {
      .title {
        font-size: 48px; 
        line-height: 58px;
      }

      .description {
        font-size: 22px; 
        line-height: 30px; 
      }
    }
    .imageTextStyle2-1,
    .imageTextStyle2-2,
    .imageTextStyle2-3 {
      .detail_gallery-text {
        height: 168px;
        .title {
          font-size: 28px;
          line-height: 36px;
          margin-bottom: 16px;
        }
        .description {
          font-size: 18px;
          line-height: 24px;
          -webkit-line-clamp: 5;  /*要显示的行数*/
        }
      }
    }
    .imageTextStyle3-1,
    .imageTextStyle3-2 {
      .detail_gallery-text {
        height: 235px;
        .title {
          font-size: 28px;
          line-height: 36px;
          margin-bottom: 16px;
        }
        .description {
          font-size: 18px;
          line-height: 24px;
          -webkit-line-clamp: 6;  /*要显示的行数*/
        }
      }
    }
  }
  @media screen and (max-width: 1400px) {
    .detail_gallery-text {
      .title {
        font-size: 42px; 
        line-height: 56px;
      }

      .description {
        font-size: 20px; 
        line-height: 28px; 
      }
    }
    .imageTextStyle2-1,
    .imageTextStyle2-2,
    .imageTextStyle2-3 {
      .detail_gallery-text {
        height: 170px;
        .title {
          font-size: 26px;
          line-height: 32px;
          margin-bottom: 16px;
        }
        .description {
          font-size: 16px;
          line-height: 22px;
          -webkit-line-clamp: 4;  /*要显示的行数*/
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    .detail_gallery {
      height: 100%;
      overflow: visible;
      padding-top: 0;
      .threeColumn {
        padding: 0;
      }
    }
    .detail_gallery-text {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        font-size: 18px; 
        line-height: 26px;
        margin-bottom: 8px; 
      }

      .description {
        font-size: 14px; 
        line-height: 22px; 
        color: #191919;
        display: block !important;
        margin-bottom: 0px !important;
      }
    }
    .imageTextStyle1-1,
    .imageTextStyle1-2,
    .imageTextStyle1-5,
    .imageTextStyle1-6 {
      flex-direction: column;
      .detail_gallery-image {
        max-width: 100%;
      }
    }
    .imageTextStyle1-5,
    .imageTextStyle1-1 {
      .detail_gallery-text {
        padding: 20px 20px 40px;
        order: 1;
      }
      .detail_gallery-image {
        order: 0;
      }
    }
    .imageTextStyle1-6,
    .imageTextStyle1-2 {
      margin-bottom: 40px;
      .detail_gallery-text {
        order: 0;
        padding: 0 20px;
      }
      .detail_gallery-image {
        margin-top: 20px;
        order: 1;
      }
    }
    .imageTextStyle1-3 {
      .detail_gallery-image {
        order: 0;
      }
      .detail_gallery-text {
        text-align: left;
        order: 1;
        width: 100%;
        margin: 20px auto 40px;
        padding: 0 20px;
      }
    }
    .imageTextStyle1-4 {
      margin-bottom: 40px;
      .detail_gallery-text {
        text-align: left;
        width: 100%;
        padding: 0 20px 20px;
        margin: 0;
      }
    }
    .imageTextStyle2-1,
    .imageTextStyle2-2,
    .imageTextStyle2-3 {
      margin-bottom: 40px;
      .detail_gallery-text {
        height: auto;
        padding: 0 20px 20px;
        .title {
          font-size: 18px; 
          line-height: 26px;
        }
        .description {
          font-size: 14px; 
          line-height: 22px; 
        }
      }
      .detail_gallery-image {
        margin: 0;
      }
      &:first-child {
        padding-left: 0;
        padding-right: 0;
      }
      &:last-child {
        padding-left: 0;
        padding-right: 0;
      }
    }
    .imageTextStyle3-1,
    .imageTextStyle3-2 {
      margin-bottom: 40px;
      .detail_gallery-text {
        height: auto;
        padding: 0 20px;
        .title {
          font-size: 18px; 
          line-height: 26px;
        }
        .description {
          font-size: 14px; 
          line-height: 22px; 
        }
      }
      .detail_gallery-image {
        margin: 0;
      }
      &:first-child {
        padding: 0;
      }
      &:nth-child(2) {
        padding: 0;
      }
      &:last-child {
        padding: 0;
      }
    }
    .imageTextStyle3-2 {
      .detail_gallery-image {
        margin-top: 20px;
      }
    }
    .imageTextStyle3-1 {
      .detail_gallery-text {
        margin-top: 20px;
      }
    }
    .imageTextStyle4-1 {
      margin: 0 0 40px;
    }
    .imageTextStyle4-2 {
      padding: 0 0 40px;
      .detail_gallery-text {
        padding: 0 20px;
      }
    }
  }
</style>